import React from 'react'
import './my.css'
//import pic from './image/my.jpg'

import suibi from './image/suibi.png'
import wenzhang from './image/wenzhang.png'
import guanzhu from './image/guanzhu.png'
import fensi from './image/fensi.png'
import { ActivityIndicator } from 'antd-mobile'
import { BrowserRouter as Router, Redirect, Route, NavLink, Switch } from 'react-router-dom';

class Mymsg extends React.Component {
 
    constructor(props) {
        super(props);
        this.state = {
			userid: localStorage.getItem("userid"),
			res: {},
			isshow:true
  	  };
    }
    componentWillMount() {
		//console.log('componentWillMount');
		//获取本地userid
		//根据userid查询头像，姓名，个性签名
		fetch('http://62.234.30.197:8088/userlist/cha', {
			method: 'post',
			//这里的id应该是从，登录之后，本地存储获取的
			body: JSON.stringify({'userid':`${this.state.userid}`}),
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			////console.log(res[0])
			this.setState({
				res: res[0],
				isshow: false
			});
			var _html = `&nbsp;&nbsp; userid:`;
			_html += res[0].userid
			document.getElementById('my-uid').innerHTML = _html;
			_html = res[0].pic
			document.getElementById('imgtou').src = _html;
			_html = res[0].name
			document.getElementById('my-name').innerHTML = _html;
			////console.log(res[0].signature.length);
			_html = (res[0].signature == '                    ' ? '您的个性签名为空' : res[0].signature)
			document.getElementById('my-sig').innerHTML = _html;
		})
		
    }
	
    render () {
		return (
        <div>
        	<div className='my-top-wode'>我的</div>
			<NavLink to={{pathname:'/Mymsgsetnamesig',state:{data:this.state.res}}}>
				<div id='my-picnamesig'>
					<img id='imgtou' src='' className='my-pic floatleft'/>
					<div className='floatleft my-namesig-box'>
						
						<br /><span id='my-name' ></span><br />
						<span id='my-sig'></span><br />
						&nbsp;<span id='my-uid'></span>
					</div>
				</div>
			</NavLink>
			<div>
				<ul id='my-threebox'>
					<li>
						<NavLink to={{pathname:'/Mymysuibi'}}>
							<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<img src={suibi} className=''/>
							<br />&nbsp;&nbsp;&nbsp;&nbsp;我的随笔
						</NavLink>
					</li>
					<li>
						<NavLink to={{pathname:'/Mymywen'}}>
							<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<img src={wenzhang} className=''/>
							<br />&nbsp;&nbsp;&nbsp;&nbsp;我的文章
						</NavLink>
					</li>
					<li>
						<NavLink to={{pathname:'/Mymyguan'}}>
							<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<img src={guanzhu} className=''/>
							<br />&nbsp;&nbsp;&nbsp;&nbsp;我的关注
						</NavLink>
					</li>
					<li>
						<NavLink to={{pathname:'/Mymyfen'}}>
							<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<img src={fensi} className=''/>
							<br />&nbsp;&nbsp;&nbsp;&nbsp;我的粉丝
						</NavLink>
					</li>
					
				</ul>
			</div>
			<NavLink to={{pathname:'/Myshoucang',state:{data:this.state.res}}}>
				<div className='my-kuang'>
					<span className='my-kuang-lefttxt'>&nbsp;♥&nbsp;&nbsp;</span>
					<span className='my-kuang-mid-txt'>我的收藏</span>
					<span className='my-kuang-right'>&gt;</span>
				</div>
			</NavLink>
			<NavLink to={{pathname:'/Mybook'}}>
				<div className='my-kuang'>
					<span className='my-kuang-lefttxt'>&nbsp;♥&nbsp;&nbsp;</span>
					<span className='my-kuang-mid-txt'>我推荐的书籍</span>
					<span className='my-kuang-right'>&gt;</span>
				</div>
			</NavLink>
			<NavLink to={{pathname:'/Myactivity'}}>
				<div className='my-kuang'>
					<span className='my-kuang-lefttxt'>&nbsp;♥&nbsp;&nbsp;</span>
					<span className='my-kuang-mid-txt'>我参加的活动</span>
					<span className='my-kuang-right'>&gt;</span>
				</div>
			</NavLink>
			<NavLink to={{pathname:'/Myset'}}>
				<div className='my-kuang'>
					<span className='my-kuang-lefttxt'>&nbsp;♥&nbsp;&nbsp;</span>
					<span className='my-kuang-mid-txt'>设置</span>
					<span className='my-kuang-right'>&gt;</span>
				</div>
			</NavLink>
        </div>
    );
  }
}
export default Mymsg

// <button onClick={() => this.props.history.goBack()}> 返回 </button><br />
// <button onClick={this.userlistchaall}>查所有</button><br />
// <div id="container"> </div>